<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{color: red; font-weight: bolder; margin-left: 20px;}
    </style>
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#submitBtn").click(function () {
                //将span清空
                $("span").empty();
                var flag = true;
                //验证用户名为6-15位的数字字母下划线
                var reg_username = /^\w{6,15}$/;
                var username = $("[name='username']").val();
                if(!reg_username.test(username)){
                    $("#msg_username").html("用户名为6-15位的数字字母下划线");
                    flag = false;
                }

                //验证密码为6-15位的数字字母下划线，不能以数字开头
                var reg_password = /^[a-zA-Z_]\w{5,14}$/;
                var password = $("[name='password']").val();
                if(!reg_password.test(password)){
                    $("#msg_password").html("密码为6-15位的数字字母下划线，不能以数字开头");
                    flag = false;
                }

                //验证两次密码输入是否一致
                var rePassword = $("[name='rePassword']").val();
                /*if(rePassword == ""){
                    alert("请再次输入密码");
                    return false;
                }*/
                if(rePassword.length == 0){
                    $("#msg_rePassword").html("请再次输入密码");
                    flag = false;
                }else{
                    if(password != rePassword){
                        $("#msg_rePassword").html("两次输入密码不一致");
                        flag = false;
                    }
                }

                //验证必须选择性别
                if($("[name='sex']:checked").length == 0){
                    $("#msg_sex").html("请选择性别");
                    flag = false;
                }

                //验证年龄在12-99之间
                var reg_age = /^([2-9][0-9]|1[2-9])$/;
                var age = $("[name='age']").val();
                if(!reg_age.test(age)){
                    $("#msg_age").html("年龄在12-99之间");
                    flag = false;
                }

                //验证正确的邮箱地址
                var reg_email = /^\w+@\w+\.(com|cn|com\.cn)$/;
                var email = $("[name='email']").val();
                if(!reg_email.test(email)){
                    $("#msg_email").html("邮箱格式不正确");
                    flag = false;
                }

                return flag;
            });
        });
    </script>
</head>
<body>

<form action="regist_success.html" method="post">
    用户名：<input type="text" name="username"><span id="msg_username"></span><br>
    密码：<input type="password" name="password"><span id="msg_password"></span><br>
    确认密码：<input type="password" name="rePassword"><span id="msg_rePassword"></span><br>
    性别：<input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女<span id="msg_sex"></span><br>
    年龄：<input type="text" name="age"><span id="msg_age"></span><br>
    邮箱：<input type="text" name="email"><span id="msg_email"></span><br>
    <input type="submit" id="submitBtn">
</form>

</body>
</html>